<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
		String path = request.getContextPath();
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%request.setCharacterEncoding("utf-8"); %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员信息修改</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
<!--bootstrap.min.css-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!--font-awesome.css?v=4.4.0-->
    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!--iCheck/custom.css-->
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/plugins/iCheck/custom.css"/>
    <!--bootstrap.min.css-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!--style.css-->
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/style.css"/>
    <!--jquery.min.js-->
	<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>	
	
    <style type="text/css">
    	.cuowu{
    		margin: 0;
    	}
    </style>
</head>
<body class="gray-bg">
				<div class="ibox-content">
					<form action="<%=basePath%>BackstageServlet/editMember?user_id=${param.user_id}" target="" method="post" class="form-horizontal" id="zhuce">
						<div class="row" style="border: 1px solid rgba(0,0,0,0);">
							<div style="width: 400px;float: left;margin-left: 30px;" id="form-group">
								<div class="input-group m-b"><span class="input-group-addon" style="background-color: #3F9CDD;color: white;">用户账号</span>
									<div class="has-warning">
										<input type="text"  readonly id="user_account" value="" name="user_account" class="form-control cuowu" style="height: 36px;">
									</div>
								</div>
								<div style="height:1px;" id="user_err"></div>
							</div>
							
							<div style="width: 400px;float: left;margin-left: 20px;" id="form-group">
								<div class="input-group m-b"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">用户姓名</span>
									<div class="has-warning">
										<input type="text" id="user_name" value="" name="user_name" class="form-control cuowu" style="height: 36px;">
									</div>
								</div>
								<div style="height: 1px;"></div>
							</div>
						</div>
						
						<div class="row" style="border: 1px solid rgba(0,0,0,0);margin-left: 0px;">
							<div class="form-group">
								<div class="col-md-2" style="background-color: #3F9CDD;width: 82px;height: 36px;color: white;text-align: center;line-height: 36px;font-size: 16px;margin-top: 0px;float: left;margin-left: 30px;">
									性&nbsp;&nbsp;别
								</div>
								&nbsp;&nbsp;&nbsp;&nbsp;
								<div class="col-md-10" style="margin-top: 0px;float: left;margin-left: 30px;">
									<div class="radio i-checks">
										<label>
	                                        <input type="radio" value="男" id="man" name="gender" checked="checked">
	                                        <i></i> 男
	                                    </label>
	                                    &nbsp;&nbsp;&nbsp;
	                                    <label>
	                                        <input type="radio" value="女" id="woman" name="gender" >
	                                        <i></i>女
	                                    </label>
									</div>
								</div>
							</div>
							
						
							<div  style="margin-top: -51px;float: left;width: 400px;margin-left: 435px;" id="form-group">
								<div class="input-group m-b"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">联系电话</span>
									<div class="has-warning">
										<input type="text"  id="user_tel" value="" name="user_tel" class="form-control cuowu" style="height: 36px;">
									</div>
								</div>
								<div style="height: 1px;"></div>
							</div>
						</div>
							
						<div class="row" style="border: 1px solid rgba(0,0,0,0);" >
							<div style="width: 400px;float: left;margin-left: 30px;" id="form-group">
								<div class="input-group m-b"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">身法证号</span>
									<div class="has-warning">
										<input type="text"  id="user_idcard" value="" name="user_idcard" class="form-control cuowu" style="height: 36px;">
									</div>
								</div>
								<div style="height: 1px;"></div>
							</div>
							
							<div style="width: 400px;float: left;margin-left: 20px;" id="form-group">
								<div class="input-group m-b"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">电子邮箱</span>
									<div class="has-warning">
										<input type="text" id="user_email" value="" name="user_email" class="form-control  cuowu" style="height: 36px;">
									</div>
								</div>
								<div style="height: 1px;"></div>
							</div>
						</div>
							
							
						<div class="row" style="border: 1px solid rgba(0,0,0,0);">
							<div style="width: 400px;float: left;margin-left: 30px;" id="form-group">
								<div class="input-group m-b"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">邮政编码</span>
									<div class="has-warning">
										<input type="text"  id="user_ems" value="" name="user_ems" class="form-control cuowu" style="height: 36px;">
									</div>
								</div>
								<div style="height: 1px;"></div>
							</div>
							
							<div style="width: 400px;float: left;margin-left: 20px;" id="form-group">
								<div class="input-group m-b"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">推荐人名</span>
									<div class="has-warning">
										<input type="text"  id="user_tuijian" name="user_tuijian" value=""  class="form-control cuowu" style="height: 36px;">
									</div>
								</div>
								<div style="height: 1px;"></div>
							</div>
						</div>
						
						<div class="row" style="border: 1px solid rgba(0,0,0,0);">
							<div style="width: 400px;float: left;margin-left: 30px;">
								<div class="input-group m-b"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">开户银行</span>
									<div class="has-warning">
											<select name="bank_id" class="form-control cuowu" id="bank">
												
												
											</select>
									</div>
								</div>
							</div>
							
							<div style="width: 400px;float: left;margin-left: 20px;" id="form-group">
								<div class="input-group m-b"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">开户卡号</span>
									<div class="has-warning">
										<input type="text" id="user_cardNo" value="" name="user_cardNo" class="form-control cuowu" style="height: 36px;">
									</div>
								</div>
								<div style="height: 1px;"></div>
							</div>
						</div>
						
						<div class="row" style="border: 1px solid rgba(0,0,0,0);">
							<div style="width: 400px;float: left;margin-left: 30px;" id="form-group">
								<div class="input-group m-b"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">用户密码</span>
									<div class="has-warning">
										<input type="text" id="user_pwd" value=""  name="user_pwd" class="form-control cuowu" style="height: 36px;">
									</div>
								</div>
								<div style="height: 1px;"></div>
							</div>
							
							<div style="width: 400px;float: left;margin-left: 20px;" id="form-group">
								<div class="input-group m-b"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">二级密码</span>
									<div class="has-warning">
										<input type="text" id="user_tpwd" value="" name="user_tpwd" class="form-control cuowu" style="height: 36px;">
									</div>
								</div>
								<div style="height: 1px;"></div>
							</div>
						</div>
						
						
						<div class="form-group">
							<div class="col-md-2" style="background-color: #3F9CDD;width: 82px;height: 36px;color: white;text-align: center;line-height: 36px;font-size: 16px;margin-top: 0px;float: left;margin-left: 30px;">
								状&nbsp;&nbsp;态
							</div>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<div class="col-md-10" style="margin-top: 0px;float: left;margin-left: 30px;">
								<div class="radio i-checks">
									<label>
                                        <input type="radio" value="1" id="qiyong" name="state" checked="checked">
                                        <i></i> 启用
                                    </label>
                                    &nbsp;&nbsp;&nbsp;
                                    <label>
                                        <input type="radio" value="2" id="jinyong" name="state">
                                        <i></i>禁用
                                    </label>
								</div>
							</div>
						</div>
						
					
						<div  style="margin-top: -51px;float: left;width: 400px;margin-left: 435px;" id="form-group">
							<div class="input-group m-b"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">创建时间</span>
								<div class="has-warning">
									<input type="text" id="user_time" value="" name="user_time" class="form-control layer-date laydate-icon cuowu " onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" style="height: 36px;">
								</div>
							</div>
							<div style="height: 1px;"></div>
						</div>
						
						<div class="row" style="border: 1px solid rgba(0,0,0,0);">
							<div style="width: 400px;float: left;margin-left: 30px;">
								<div class="input-group m-b"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">会员类型</span>
									<div class="has-warning">
											<select name="type_id" class="form-control cuowu" id="memberType">
												
											</select>
									</div>
								</div>
							</div>
							
							<div style="width: 400px;float: left;margin-left: 20px;" id="form-group">
								<div class="input-group m-b"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">收货地址</span>
									<div class="has-warning">
										<input type="text" id="user_address" value="" name="user_address" class="form-control cuowu" style="height: 36px;">
									</div>
								</div>
								<div style="height: 1px;"></div>
							</div>
						</div>
						<button id="xiugai" class="btn btn-info pull-right">修改</button>
					</form>
				</div>


<!--bootstrap.min.js-->
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--content.js-->
<script src="<%=basePath%>js/content.js" type="text/javascript" charset="utf-8"></script>
<!--icheck.min.js-->
<script src="<%=basePath%>js/plugins/iCheck/icheck.min.js" type="text/javascript" charset="utf-8"></script>
<!--jquery.validate.min.js-->
<script src="<%=basePath%>js/plugins/validate/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
<!--messages_zh.min.js-->
<script src="<%=basePath%>js/plugins/validate/messages_zh.min.js" type="text/javascript" charset="utf-8"></script>
<!-- laydate.js -->
<script src="<%=basePath%>js/plugins/layer/laydate/laydate.js" type="text/javascript" charset="utf-8"></script> 


<script>
//提交表单前进行表单验证并关闭当前弹出层
	$('#xiugai').click(function(){
		var r = $('#zhuce').valid();
		if(r){
			$('form').submit();
			setTimeout(function() {parent.layer.closeAll();}, 100);
		}
	});
</script>
<!-- 下拉菜单通过ajax动态获取银行信息和会员类型 -->
<script type="text/javascript">
		$.get('${pageContext.request.contextPath}/BackstageServlet/preAddMember',function(data){
			//将后台传递过来的Json格式的字符串转换为Json
			var bankList = JSON.parse(data);
			//alert(bankList[1][0].type_name);
			var ops="";
			var opt="";
			ops = "<option value=''>请选择</option>";
			opt = "<option value=''>请选择</option>";
			for(var i=0;i<bankList[0].length;i++){
				ops +="<option value='"+bankList[0][i].bank_id+"'>"+bankList[0][i].bank_name+"</option>";
			}
			for(var i = 0;i<bankList[1].length;i++){
				opt += "<option  value='"+bankList[1][i].type_id+"'>"+bankList[1][i].type_name+"</option>";
			}
			$('#bank').html(ops);
			$('#memberType').html(opt);
		});
</script>
<!-- 通过ajax获取要修改的会员信息 -->
<script type="text/javascript">
	$.get('${pageContext.request.contextPath}/BackstageServlet/preEditMember',{"user_id":"${param.user_id}"},function(data){
		var member = JSON.parse(data);
		$('#user_account').val(member[0].user_id);
		$('#user_name').val(member[0].user_name);
		$('#user_tel').val(member[0].user_tel);
		$('#user_idcard').val(member[0].user_idcard);
		$('#user_email').val(member[0].user_email);
		$('#user_ems').val(member[0].user_ems);
		$('#user_tuijian').val(member[0].user_tuijian);
		$('#user_cardNo').val(member[0].user_cardNo);
		$('#user_pwd').val(member[0].user_pwd);
		$('#user_tpwd').val(member[0].user_tpwd);
		$('#user_time').val(member[3]);
		$('#user_address').val(member[0].user_address);
		//修改radio状态
		if(member[0].user_gender=='女'){
			$('#man').prop("checked",false);
			$('#woman').prop('checked',"checked");
			$('#man').parent('div').removeClass('checked');
			$('#woman').parent('div').addClass('checked');
		}
		if(member[0].state_name=='禁用'){
			$('#qiyong').prop("checked",false);
			$('#jinyong').prop('checked',"checked");
			$('#qiyong').parent('div').removeClass('checked');
			$('#jinyong').parent('div').addClass('checked');
		}
		//设置银行select下拉菜单默认为选中用户的开户行
		var bank_id="";
		for(var i=0;i<member[1].length;i++){
			if(member[1][i].bank_name==member[0].bank_name){
				bank_id=member[1][i].bank_id;
			}
		}
		$("#bank option[value='']").remove(); //删除Select中Value=''的Option
		$('#bank').prepend("<option value='"+bank_id+"' selected>"+member[0].bank_name+"</option>");//将用户的开户行添加到第一个option并设置为默认选中
		//设置会员类型select下拉菜单默认为选中用户的会员类型
		var type_id="";
		for(var i=0;i<member[2].length;i++){
			if(member[2][i].bank_name==member[0].type_name){
				type_id=member[2][i].type_id;
			}
		}
		 $("#memberType option[value='']").remove(); //删除Select中Value=''的Option
		$('#memberType').prepend("<option value='"+type_id+"' selected>"+member[0].type_name+"</option>");//将用户的会员类型添加到第一个option并设置为默认选中
	});
</script>


<script>
    $(document).ready(function () {
        $(".i-checks").iCheck({checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green",})
    });
    //验证，输入框，有值为绿色，无值则为红色
    $(':text').each(function(){
    	$(this).blur(function(){
    		if($(this).val()!=''){
    			$(this).css("border","1px solid #1AB394");
    		}else{
    			if($(this).attr('name')=='user_tuijian'||$(this).attr('name')=='user_email'){
    				$(this).css("border","1px solid #F8AC59");
    			}else{
    				$(this).css("border","1px solid red");
    			}
    		}
    	});
    });
    $('#bank').blur(function(){
    	if($(this).val()!=''){
    		$(this).css("border","1px solid #1AB394");
    	}else{
			$(this).css("border","1px solid red");
		}
    });
</script>


<script>
//表单验证
        $.validator.setDefaults({
            highlight: function (element) {
                $(element).closest('#form-group').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                element.closest('#form-group').removeClass('has-error').addClass('has-success');
            },
            errorElement: "span",
            errorPlacement: function (error, element) {
                if (element.is(":radio") || element.is(":checkbox")) {
                    error.appendTo(element.parent().parent().parent());
                } else {
                	error = $(error).css('margin-top','-10px');
                	error = $(error).css('margin-left','80px');
                	element.parent().parent().next().before(error);
                }
            },
            errorClass: "help-block m-b-none",
            validClass: "help-block m-b-none"


        });
      

        //以下为官方示例
        $().ready(function () {
            $("#commentForm").validate();
            var icon = "<i class='fa fa-times-circle'></i> ";
            $("#zhuce").validate({
                rules: {
                    user_account: {
                    	required: true,
                        digits:true
                    },
                    user_name: "required",
                    user_tel: {
                        required: true,
                        digits:true,
                        minlength: 11,
                        maxlength:11
                    },
                    user_idcard: {
                        required: true,
                        minlength: 18,
                        maxlength:18
                    },
                    user_ems: {
                        required: true,
                        digits:true,
                        minlength: 6,
                        maxlength: 6
                    },
                    user_cardNo: {
                        required: true,
                        digits:true,
                        minlength: 16,
                        maxlength: 19
                    },
                    user_pwd: {
                    	required: true,
                        minlength: 3,
                        maxlength: 16
                    },
                    user_tpwd: {
                    	required: true,
                    	digits:true,
                        minlength: 6,
                        maxlength: 6
                    },
                    user_address: {
                    	required: true
                    },
                    user_time: {
                    	required: true
                    }
                    
                },
                messages: {
                    user_account: {
                    	required: icon + "请输入你的账号"
                    },
                    user_name: icon + "请输入您的名字",
                    user_tel: {
                        required: icon + "请输入您的电话号码",
                        minlength: icon + "请输入位数正确的电话号码",
                        maxlength: icon + "请输入位数正确的电话号码"
                    },
                    user_idcard: {
                        required: icon + "请输入您的二代身份证号码",
                        minlength: icon + "请输入合法的身份证号码",
                        maxlength: icon + "请输入合法的身份证号码"
                    },
                    user_ems: {
                        required: icon + "请输入邮政编码",
                        minlength: icon + "请输入正确的邮政编码",
                        maxlength: icon + "请输入正确的邮政编码"
                    },
                    user_cardNo: {
                    	required: icon + "请输入开户银行卡号",
                        minlength: icon + "请输入正确的银行卡号",
                        maxlength: icon + "请输入正确的银行卡号"
                    },
                    user_pwd: {
                        required: icon + "请输入您的密码",
                        minlength: icon + "密码至少3位"
                    },
                    user_tpwd: {
                    	required: icon + "请输入您的二级密码",
                        minlength: icon + "请输入正确的6位密码",
                        maxlength: icon + "请输入正确的6位密码"
                    },
                    user_address: {
                    	required: icon + "请输入收货地址"
                    },
                    user_time: {
                    	required: icon + "请选择创建日期"
                    }
                    
                }
            });

            // propose username by combining first- and lastname
            $("#username").focus(function () {
                var firstname = $("#firstname").val();
                var lastname = $("#lastname").val();
                if (firstname && lastname && !this.value) {
                    this.value = firstname + "." + lastname;
                }
            });
        });

</script>
</body>

</html>
